<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<%
	String path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	

	
	jQuery(function(){
		//初始化左侧菜单
		<c:forEach var="menuBean" items="${requestScope.menuList}">
		var menuid="${menuBean.menu_id}";
		jQuery("#treeMenu_div${menuBean.menu_id}").tree({
			url:    "<%=path%>/servlet/getData?menu_id=" + menuid + "",
			onClick: function(node){
				addTab(node.text,node.href1,"icon-blank");
			}

		});
		</c:forEach>

		tabClose();
		tabCloseEven();
	});

	/**
	*该函数用于创建一个新的选项卡
	*subtitle:选项卡标题  url：选项卡链接地址  icon:选项卡的图标
	*/
	function addTab(subtitle, url, icon) {
		if (!$('#tabs').tabs('exists', subtitle)) {
			$('#tabs').tabs('add', {
				title : subtitle,
				content : createFrame(url),
				closable : true,
				icon : icon
			});
		} else {
			$('#tabs').tabs('select', subtitle);
			$('#mm-tabupdate').click();
		}
		tabClose();
	}

	/**
	*该函数用于创建一个iframe，该iframe显示的内容为链接的url
	*/
	function createFrame(url) {
		var s = '<iframe scrolling="auto" frameborder="0"  src="' + url
				+ '" style="width:100%;height:100%;"></iframe>';
		return s;
	}

	
	/**
	*该函数双击关闭TAB选项卡和为选项卡绑定右键
	*/
	function tabClose() {
		/*双击关闭TAB选项卡*/
		$(".tabs-inner").dblclick(function() {
			var subtitle = $(this).children(".tabs-closable").text();
			$('#tabs').tabs('close', subtitle);
		})
		/*为选项卡绑定右键*/
		$(".tabs-inner").bind('contextmenu', function(e) {
			$('#mm').menu('show', {
				left : e.pageX,
				top : e.pageY
			});

			var subtitle = $(this).children(".tabs-closable").text();

			$('#mm').data("currtab", subtitle);
			$('#tabs').tabs('select', subtitle);
			return false;
		});
	}
	
	/**
	*该函数绑定并实现菜单右击事现
	*/
	function tabCloseEven() {
		//刷新
		$('#mm-tabupdate').click(function() {
			var currTab = $('#tabs').tabs('getSelected');
			var url = $(currTab.panel('options').content).attr('src');
			$('#tabs').tabs('update', {
				tab : currTab,
				options : {
					content : createFrame(url)
				}
			})
		})
		//关闭当前
		$('#mm-tabclose').click(function() {
			var currtab_title = $('#mm').data("currtab");
			$('#tabs').tabs('close', currtab_title);
		})
		//全部关闭
		$('#mm-tabcloseall').click(function() {
			$('.tabs-inner span').each(function(i, n) {
				var t = $(n).text();
				$('#tabs').tabs('close', t);
			});
		});
		//关闭除当前之外的TAB
		$('#mm-tabcloseother').click(function() {
			$('#mm-tabcloseright').click();
			$('#mm-tabcloseleft').click();
		});
		//关闭当前右侧的TAB
		$('#mm-tabcloseright').click(function() {
			var nextall = $('.tabs-selected').nextAll();
			if (nextall.length == 0) {
				//msgShow('系统提示','后边没有啦~~','error');
				alert('后边没有啦~~');
				return false;
			}
			nextall.each(function(i, n) {
				var t = $('a:eq(0) span', $(n)).text();
				$('#tabs').tabs('close', t);
			});
			return false;
		});
		//关闭当前左侧的TAB
		$('#mm-tabcloseleft').click(function() {
			var prevall = $('.tabs-selected').prevAll();
			if (prevall.length == 0) {
				alert('到头了，前边没有啦~~');
				return false;
			}
			prevall.each(function(i, n) {
				var t = $('a:eq(0) span', $(n)).text();
				$('#tabs').tabs('close', t);
			});
			return false;
		});

		//退出
		$("#mm-exit").click(function() {
			$('#mm').menu('hide');
		})
	}
</script>

</head>
<body class="easyui-layout">

	<div data-options="region:'north',split:true,border:false"
		style="overflow: hidden; height: 30px;">
		<span style="float: right; padding-right: 20px;">欢迎 半颗柠檬 <a
			href="#">修改密码</a> <a href="#">退出</a>
		</span>
	</div>


	<!-- 左侧菜单 -->
	<div region="west" class="west" style="width: 150px"
		data-options="hide:true,split:true">
		<div id="aa" class="easyui-accordion"
			data-options="fit:true,border:false"
			style="width: 300px; height: 200px; margin: 0px; padding: 0px;">
			<!--  菜单   -->
			<c:forEach var="menuBean" items="${requestScope.menuList}">
				<div title="${menuBean.menu_name}" icon="icon-sys"
					style="overflow: auto;">
					<div id="treeMenu_div${menuBean.menu_id}"></div>
				</div>
			</c:forEach>
		</div>
	</div>


	<div region="center">
		<div id="tabs" class="easyui-tabs" fit="true" border="false">
			<div title="欢迎使用"
				style="padding: 20px; overflow: hidden; color: red;">
				<h1 style="font-size: 24px;">欢迎使用xx系统</h1>

			</div>
		</div>
	</div>

	<!-- 底部 -->
	<div region="south" split="true" style="height: 30px">
		<div class="footer" style="text-align: center;">公司版权信息</div>

	</div>

<!-- 选项卡右键菜单 -->
	<div id="mm" class="easyui-menu" style="width: 150px;">
		<div id="mm-tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="mm-tabclose">关闭</div>
		<div id="mm-tabcloseall">全部关闭</div>
		<div id="mm-tabcloseother">除此之外全部关闭</div>
		<div class="menu-sep"></div>
		<div id="mm-tabcloseright">当前页右侧全部关闭</div>
		<div id="mm-tabcloseleft">当前页左侧全部关闭</div>
		<div class="menu-sep"></div>
		<div id="mm-exit">退出</div>
	</div>

</body>
</html>